<template>
  <div :class="$style.background">
    <div class="wrapper">
      <el-tag :type="cuCallInfo | fltTType">{{cuCallInfo}}</el-tag> 通话时长：{{time.hours}}时{{time.minutes}}分{{time.seconds}}秒
      <el-button type="primary" class="break" @click="handleHangup">挂断</el-button>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      time: {
        seconds: 0,
        minutes: 0,
        hours: 0,
      },
      setInterval: '',
    }
  },
  computed: {
    cuCallType(){
      return this.$store.getters.callMsg.callType
    },
    cuIsHangup(){
      return this.$store.getters.isHangup
    },
    cuCallInfo(){
      return this.$store.getters.callInfo
    }
  },
  filters:{
    fltTType(val){
      switch(val){
        case '通话尚未建立连接':
          return 'danger'
        case '通话已建立连接':
          return 'success'
        case '响铃中':
          return 'primary'
        default:
          return 'warning'
      }
    }
  },
  watch: {
    cuIsHangup(isHangup){
      // 通过isHangup来判断通话还是挂机
      console.log('isHangup'+isHangup)
      if(!isHangup){
        this.getTime()
      }else{
        clearInterval(this.setInterval)
        this.time= {
          seconds: 0,
          minutes: 0,
          hours: 0,
        }
      }
    }
  },
  methods: {
    getTime() {
      this.setInterval= setInterval(() => {
        this.time.seconds++
        if (this.time.seconds === 60) {
          this.time.seconds = 0
          this.time.minutes++
        }
        if (this.time.minutes === 60) {
          this.time.minutes = 0
          this.time.hours++
        }
      }, 1000)
    },
    async handleHangup() {
      // 如果未挂断，则提示建立通话，如果已挂断，则提示填写通话内容
      if (websocket.state === 0) {
        this.$toast({
          message: '请先连接'
        })
        return
      }
      let Extension = this.$store.getters.getUserInfo.usertel
      let baseUrl = window.ipurl
      //  模拟
      // Extension = 20132
      try{
        const {data} = await this.$get(this,{
          api:'getHangup',
          data:{
            Extension,
            value:16
          }
        },baseUrl)
        if(data.state === 0){
          return
        }
        this.$warn('getHangup接口报错')
      }catch(e){
        this.$warn('getHangup:',e.message)
      }
    },
  },
}
</script>
<style lang="scss" module>
.background {
  height: 60px;
  padding: 0 10px;
  line-height: 60px;
  overflow: hidden;
  box-sizing: border-box;
  background: #e9e9e9;
  border: 1px solid #444;
  border-radius: 5px;
  box-shadow: 0 1px 3px 2px #666;
  position: fixed;
  top:0;
  right: 405px;
  z-index: 10;
  font-size:14px;
}
</style>

<style lang="scss" scoped>
.break {
  background: #ffa838;
  border: none;
  &:hover {
    opacity: .8;
  }
}
</style>

